<!--改版-->
<style scoped>
  /*---------------------reset CSS-----------------------*/
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, font, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
  }

  :focus, input, button, select, textarea {
    outline: 0;
  }

  body {
    line-height: 1;
    color: #3e3a39;
    background: white;

  }

  ol, ul, li {
    list-style: none;
  }

  table {
    border-collapse: separate;
    border-spacing: 0;
  }

  textarea {
    resize: none; /*必须添加overflow此属性才能生效*/
    overflow: auto;
  }

  header, section, footer, aside, nav, main, article, figure {
    display: block;
  }

  caption, th, td {
    text-align: left;
    font-weight: normal;
  }

  blockquote:before, blockquote:after,
  q:before, q:after {
    content: "";
  }

  blockquote, q {
    quotes: "" "";
  }

  a, a:hover.a:link, a:visited, a:active {
    text-decoration: none;
  }
</style>


<style scoped>
  .date{
    position: fixed;
    background-color: #000;
    background-color: rgba(0,0,0,0.5);
    /*opacity: 0.5;*/
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
  }

  .time{
    font-size: .9rem; /*px*/
  }

  input[type=text]{
    font-size: .9rem;/*px*/
  }

  .header {
    display: flex;
    background-color: #ccc;
    line-height: 2rem;
  }

  .header > div {
    flex: 1;
    text-align: center;
  }

  .box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: .9rem; /*px*/
    background-color: #fff;
  }

  .content {
    display: flex;
    position: relative;
    height: 84%;
    overflow: hidden;
  }

  .on {
    position: absolute;
    background-color: yellow;
    width: 100%;
    height: 1.75rem;
    opacity: 0.3;
    margin-top: 7rem;
    z-index: -1;
  }

  .content > div {
    flex: 1;
    position: relative;
  }

  ul {
    position: absolute;
    width: 100%;
  }

  li {
    height: 1.75rem;
    color: #333;
    text-align: center;
    line-height: 1.75rem;
  }
</style>


<!--动画-->
<style scoped>
   .fade-enter-active,.fade-leave-active{
     transition: all 0.5s ease;
   }

   .fade-enter,.fade-leave-active{
     opacity: 0;
     transform:translateY(300px);
   }
</style>



<template>
  <div class="date" v-show="dateShow" @click="cancle">
    <!--<div class="time" @click="dateShow = !dateShow">
      <input type="text" :placeholder="placeholder" readonly  v-model="selTime"/>
    </div>-->
    <transition name="fade">
      <div class="box"  v-show="dateShow">
      <div class="header">
        <div @click="cancle">取消</div>
        <div @click="sure">确定</div>
      </div>
      <div class="on"></div>
      <div class="content">
        <div>
          <ul ref="year" id="year">
            <li  class="scroll" v-for="(year,index) in years" @touchstart="touchStart($event,year,1)"
                @touchmove="touchMove($event,year,yearLength)" @touchend="touchEnd($event,year,1)">{{year}}
            </li>
          </ul>
        </div>
        <div>
          <ul ref="month" id="month">
            <li  class="scroll" v-for="(month,index) in 12" @touchstart="touchStart($event,month,2)"
                @touchmove="touchMove($event,'month',monthLength)" @touchend="touchEnd($event,month,2)">{{month}}
            </li>
          </ul>
        </div>
        <div>
          <ul ref="day" id="day">
            <li  class="scroll" v-for="(day,index) in days" @touchstart="touchStart($event,day,3)"
                @touchmove="touchMove($event,day,dayLength)" @touchend="touchEnd($event,day,3)">{{day}}
            </li>
          </ul>
        </div>

      </div>
    </div>
    </transition>
  </div>
</template>



<script>

  //解决微信浏览器,页面下滑问题
  document.querySelector('body').addEventListener('touchmove', function(e) {
    if (!document.querySelector('.scroll').contains(e.target)) {
      e.preventDefault();
    }
  });

  export default{
    data(){
      return {
        startTime: 0,
        moveTime: 0,
        endTime: 0,
        startPoint: 0,
        moveLength: 0,
        endMoveLength:0,
        endPoint: 0,
        currentYear: 0,
        currentMonth: 0,
        currentDay: 0,
        selYear: 0,
        selMonth: 0,
        selDay: 0,
        selTime:'',
        sudu:1,
      }
    },
    props: {
      minYear: {default:1990},
      maxYear: {default:2010},
      dateShow: {default:true},
//      placeholder: {default:'请选择时间'},
    },
    computed: {
      years(){
        var years=[];
        var length = this.maxYear - this.minYear + 1;
        for (var i = 0; i < length; i++) {
          years.push(this.minYear + i);
        }
        return years
      },
      days(){
        var m = parseInt(this.selMonth);
        if (m == 2) {
          return parseInt(this.selYear) % 4 == 0 ? 29 : 28;
        } else if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
          return 31;
        } else {
          return 30;
        }
      },
      yearLength(){
        var length = (this.maxYear - this.minYear + 1 - 5) * this.height ;
        return length
      },    //TO为什么会被覆盖呢?
      monthLength(){
        var length = (12 - 5) * this.height;
        return length
      },
      dayLength(){
        var length = (this.days - 5) * this.height;

        return length
      },
      minLength(){
        var length = 4 * this.height;
        return length
      },
    },
    methods: {
      num9(num){
        num = parseInt(num);
        if(num < 10){
          num = '0' + num;
          return num;
        }else{
          return num;
        }
      },
      cancle(){
        this.$emit('cancle');
      },
      sure(){
        var month = this.num9(this.selMonth);
        var day = this.num9(this.selDay);
        this.selTime = this.selYear + '-' + month + '-' + day;
        var msg = {
          'selTime':this.selTime,
        };
        this.$emit('sure',msg);
      },
      touchStart(e, item, index){

        this.height = document.querySelector('li').offsetHeight;
        this.yearLength = this.height * (this.maxYear - this.minYear + 1 - 5);  //为什么只有年  需要在这里从新赋值

        this.startTime = Date.now();
        let $this = this;
        $this.endMoveLength = $this.getTranslateY(e.target.parentNode);
        let touchPoint = e.touches[0];
        $this.startPoint = touchPoint.pageY;
      },
      touchMove(e,item,length){
        let $this = this;
        let touchPoint = e.touches[0];
        $this.moveLength = ($this.endMoveLength + touchPoint.pageY - $this.startPoint) * $this.sudu;
        if($this.moveLength > 0 && $this.moveLength > $this.minLength){
          $this.moveLength = $this.minLength
        }else if($this.moveLength < 0 && -$this.moveLength > length){
          $this.moveLength = -length;
        }



        $this.translateYFun(e.target.parentNode, $this.moveLength);
      },
      touchEnd(e,item,key){
        let $this = this;
        var close = Math.abs($this.moveLength) % $this.height;
        var closeMove = $this.height - close;

        if ($this.moveLength > 0) { //向下拖动
          if (close >= $this.height / 2) {
            this.translateYFun(e.target.parentNode, $this.moveLength + closeMove);
          } else {
            this.translateYFun(e.target.parentNode, $this.moveLength - close);
          }
        } else { //向上拖动
          if (close >= $this.height / 2) {
            $this.translateYFun(e.target.parentNode, $this.moveLength - closeMove);
          } else {
            $this.translateYFun(e.target.parentNode, $this.moveLength + close);
          }

        }

        $this.endMoveLength = $this.getTranslateY(e.target.parentNode);

        var num = $this.endMoveLength/this.height ;

        switch (key){
          case 1:
            this.selYear = this.minYear + (-num) + 4;
            this.monthMove();
            break;
          case 2:
            this.selMonth = 1 + (-num) + 4;
            this.monthMove();
            break;
          case 3:
            this.selDay = 1 + (-num) + 4;
            break;
        }


      },
      translateYFun (dom, value) {
        dom.style.webkitTransform = "translate3d(0," + value + "px,0)";
      },
      getTranslateY (dom) {
        var translates = window.getComputedStyle(dom, null).getPropertyValue("-webkit-transform");
        if (translates == 'none') {
          return 0
        } else {
          translates = translates.split(',')[5].split('');
          translates.pop();
          translates = translates.join('');
          return parseInt(translates)
        }

      },
      monthMove(){
        let $this = this;
        var year = document.getElementById('year');
        var month = document.getElementById('month');
        var day = document.getElementById('day');

        var endMoveLength = $this.getTranslateY(day);

        if(endMoveLength == this.dayLength || -endMoveLength > this.dayLength){
          this.translateYFun(day, -this.dayLength);

          $this.endMoveLength = $this.getTranslateY(day);

          var num = $this.endMoveLength/this.height ;
          this.selDay = 1 + (-num) + 4;
        }



      }
    },
    mounted(){
     /* //设置模糊高度
      var section = document.querySelector('.date');
      var h = document.body.clientHeight;
      section.style.height = h + 'px';*/



      this.height = document.querySelector('li').offsetHeight;
//      初始化,获取当天时间
      var time = new Date();
      this.currentYear = time.getFullYear();
      this.currentMonth = time.getMonth() + 1;
      this.currentDay = time.getDate();
      this.selYear = this.minYear + 4;
      this.selMonth = 5;
      this.selDay = 5;


    },
  }
</script>
